<template>
  <div class="login-container">
    <!--    导航栏-->
    <van-nav-bar
      title="标题"
      class="page-nav-bar"
      left-arrow
      @click-left="$router.back()"
    >
      <template #left>
        <van-icon name="cross"/>
      </template>
    </van-nav-bar>
    <!--    !导航栏-->

    <!--表单-->
    <van-form @submit="onSubmit" ref="from">
      <van-field
        v-model="from.mobile"
        name="mobile"
        placeholder="请输入手机号"
        :rules="fromRules.mobile"
        type="number"
        maxlength="11"
      >
        <template #left-icon>
          <i class="toutiao toutiao-shouji"></i>
        </template>
      </van-field>

      <van-field
        v-model="from.code"
        name="code"
        placeholder="请输入验证码"
        :rules="fromRules.code"
        type="number"
        maxlength="6"

      >
        <!--左侧图标-->
        <template #left-icon>
          <i class="toutiao toutiao-yanzhengma"></i>
        </template>

        <!--验证码   -->
        <template #button>
          <van-count-down @finish="isSendCodeShow=false" v-if="isSendCodeShow" :time="60 * 1000" format="ss s"/>
          <van-button v-else class="send-btn" size="mini" native-type="button" type="default" @click="onSendCode">发送验证码
          </van-button>
        </template>
      </van-field>

      <div class="login-btn">
        <van-button round block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
    <!--!表单-->

  </div>
</template>

<script>
import { sendCode, login } from '@/api/user'
import { Toast } from 'vant'

const mobileReg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
export default {
  name: 'Login',
  data () {
    return {
      from: {
        mobile: '', // 表单手机号
        code: '' // 验证码
      },
      // 表单的验证规则
      fromRules: {
        mobile: [ // 手机号的验证规则
          {
            required: true,
            message: '请输入手机号'
          },
          {
            pattern: mobileReg,
            message: '请输入正确的手机号'
          }
        ],
        code: [ // 验证码的验证规则
          {
            required: true,
            message: '请输入验证码'
          },
          {
            pattern: /^[0-9]{6}$/,
            message: '请输入正确的验证码'
          }
        ]
      },
      isSendCodeShow: false // 倒计时的显示
    }
  },
  methods: {
    // 表单提交函数
    async onSubmit (val) {
      try {
        // 原始数据为三层数据
        const res = await login(val)
        this.$store.commit('setUser', res)
        await this.$router.push('/profile')
        Toast('登录成功')
      } catch (err) {
        if (err.response && err.response.status === 400) {
          Toast.fail('验证码错误或重新登录')
        }
        Toast('网络异常')
      }
    },

    // 点击发送验证码
    async onSendCode () {
      // 校验手机号
      try {
        await this.$refs.from.validate('mobile')
      } catch (err) {
        return
      }

      try {
        await sendCode(this.from.mobile)
        Toast('发送成功')
        // 显示倒计时
        this.isSendCodeShow = true
      } catch (err) {
        if (err.response && err.response.status === 429) {
          return Toast('网络拥堵,请稍后再试')
        }
        Toast('网络错误')
      }
    }
  }
}
</script>

<style scoped lang="less">
.login-container {
  .van-nav-bar {
    /deep/ .van-icon:before {
      color: #fff;
    }
  }

  .toutiao {
    font-size: 37px;
  }

  .send-btn {
    color: #666;
    width: 152px;
    height: 46px;
    background: #EDEDED;
    border-radius: 23px;
  }

  .login-btn {
    margin: 53px 28px;

    .van-button {
      width: 694px;
      height: 88px;
      background: #6DB4FB;
      border-radius: 10px;
      border: none;
    }
  }
}
</style>
